<div class="overlay-example yui3-skin-sam" id="overlay-example">
    <div id="constrain-box"></div>
</div>

<script type="text/javascript">
YUI().use("overlay", "slider", function (Y) {

    var constrainRegion = Y.one("#constrain-box").get("region"),
        overlay, sx, yx, checkbox;

    // Create Overlay from script.
    overlay = new Y.Overlay({
        id: "overlay",

        width : "150px",
        height: "120px",

        headerContent: "Constrained",
        bodyContent  : "Use the sliders to move the overlay",
        footerContent: '<label><input type="checkbox" id="constrain"> Constrain </label>',

        constrain: "#constrain-box",
        align    : {
            node  : "#constrain-box",
            points: ["cc", "cc"]
        },

        render: "#overlay-example"
    });

    // Create horizontal Slider.
    sx = new Y.Slider({
        id    : "x",
        length: "450px",
        min   : constrainRegion.left - 50,
        max   : constrainRegion.right + 50,
        value : overlay.get("x"),
        render: "#overlay-example"
    });

    // Create vertical Slider.
    sy = new Y.Slider({
        id    : "y",
        axis  : 'y',
        length: "400px",
        min   : constrainRegion.top - 50,
        max   : constrainRegion.bottom + 50,
        value : overlay.get("y"),
        render: "#overlay-example"
    });

    sx.after("valueChange", function (e) {
        overlay.set("x", e.newVal);
    });

    sy.after("valueChange", function (e) {
        overlay.set("y", e.newVal);
    });

    function enableConstraints (constrain) {
        if (constrain) {
            overlay.set("constrain", "#constrain-box");
            overlay.set("headerContent", "Constrained");
        } else {
            overlay.set("constrain", false);
            overlay.set("headerContent", "Unconstrained");
        }

        // Sync the current values of the sliders to the overlay.
        overlay.set("xy", [sx.get("value"), sy.get("value")]);
    }

    // Reference `<input type="checkbox" />` from the Overlay's footer.
    checkbox = Y.one("#constrain");
    checkbox.set("checked", true);
    checkbox.on("click", function (e) {
        enableConstraints(this.get("checked"));
    });

    // Enable constraints by default.
    enableConstraints(true);

});
</script>
